<script lang="ts">
    import type { PageProps } from "./$types";
    import TodoForm from "./TodoForm.svelte";
    import TodoList from "./TodoList.svelte";
    import Popup from "./Popup.svelte";

    const { data, form }: PageProps = $props();
</script>

<svelte:head>
    <title>Todo App</title>
</svelte:head>

<main class="flex justify-center w-full min-h-screen bg-slate-100">
    {#if form?.error}
        <Popup message={form.error} />
    {/if}

    <div class="my-16 w-1/2 space-y-5 bg-white p-8">
        <h1 class="text-3xl font-bold">
            <a href="/">Todos</a>
        </h1>

        <span class="flex items-center">
            <span class="h-px flex-1 bg-black"></span>
        </span>

        <TodoForm active={data.active} />
        <TodoList todos={data.todos} active={data.active} />
    </div>
</main>
